<template>
	<span class="stepper">
		<button  @click="count--">-</button>
		<input type="text" v-model="count">
		<button @click="count++">+</button>
	</span>
</template>
<style lang="scss" scoped="scoped">
	.stepper {
		width: 1.8rem;
		height: .6rem;
		display: flex;
		text-align: center;	
		button,
		input {
			width: .6rem;
			height: .6rem;
			flex: 1;
			line-height: .6rem;
			border:none;
		}
		input{
			background-color: #fafafa;
			text-align: center;
		}
	}
</style>
<script>
	export default {
		data() {
			return {
				// 显示的数
				count: this.value,
			}
		},
		// 传入参数
		props: {
			value: {
				type: Number,
				default: 1
			}
		},
		watch: {
			"count": {
				handler() {
					this.$emit("input", this.count);
				},
				deep: true,

			}
		}
	}
</script>

<style>
</style>
